<template>
  <div>
<!--    &lt;!&ndash;    导航条&ndash;&gt;-->
<!--    <el-menu :default-active="activeIndex" class="el-menu-demo" background-color="white" font-color="#303133" mode="horizontal" @select="handleSelect" >-->
<!--      <el-menu-item  index="/">首页</el-menu-item>-->
<!--      <el-menu-item  index="/news">新闻</el-menu-item>-->
<!--      <el-menu-item index="/KJ">科技</el-menu-item>-->
<!--      <el-menu-item index="/recreation">娱乐</el-menu-item>-->
<!--      <el-menu-item index="/health">健康</el-menu-item>-->
<!--      <el-menu-item index="/sports">体育</el-menu-item>-->
<!--      <el-menu-item index="/money">财经</el-menu-item>-->
<!--      <el-menu-item index="/army">军事</el-menu-item>-->
<!--      <el-menu-item index="/internet">互联网</el-menu-item>-->

<!--      <div style="margin-left:1000px">-->
<!--        &lt;!&ndash;          <el-link  icon="el-icon-edit" @click="editNews()">编辑新闻</el-link>&ndash;&gt;-->
<!--        <el-input v-model="searchNews" placeholder="请输入搜索内容"><i slot="suffix" style="cursor: pointer" class="el-input__icon el-icon-search" @click="selectNews()"></i></el-input>-->
<!--        <el-link icon="el-icon-user-solid" @click="toperson()">个人中心</el-link>-->
<!--      </div>-->


<!--    </el-menu>-->
    <my-header></my-header>
    <!--轮播图-->
    <div>
      <!--      轮播图的遍历                     动态将图片轮播图的容器高度设置成与图片一致-->
      <el-carousel :interval="4000" type="card" height="bannerHeight+'px'">
        <el-carousel-item v-for="item in img_list" :key="item">
          <!--        <h3 class="medium">{{ item }}</h3>-->
          <img :src="item" alt="暂无图片">
        </el-carousel-item>
      </el-carousel>
      <!--新闻展示主体-->
      <div>
        <el-container >
          <el-main>
            <router-view></router-view>
            <div class="infinite-list-wrapper" style="overflow:auto">
              <ul style="list-style-type: none" class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
                <!--              遍历新闻-->
                <li  style="height: 200px" v-for="i in news" class="list-item" @click="findPage(i.id)">
                  <div style="float: left">
                    <!--                展示新闻图片-->
                    <img style="width: 170px; height: 170px" :src="i.newsCover" >

                    <!--                  <div style="margin-right: 0px" class="block" v-for="fit in fits" :key="fit+ + '-label'">
                                        <span class="demonstration">{{ fit }}</span>
                                        <el-image style="width: 100px; height: 100px" :src="url" :fit="fit"></el-image>
                                    </div>-->
                  </div>
                  <h3 v-model="i.newsTitle" style="line-height: 170px" >{{i.newsTitle}}</h3>
                  <el-divider></el-divider>
                </li>
              </ul>
              <p v-if="loading">拼命加载中...</p>
              <p v-if="noMore">没有更多了</p>
            </div>
            <div style="margin-left: 1100px">
              回到顶部
              <el-backtop ></el-backtop>
            </div>
          </el-main>
        </el-container>
      </div>
    </div>
  </div>
</template>

<script>
//单页面引入axios
import axios from 'axios';
export default {
  name: "index",
  data() {
    return {
      //轮播图
      img_list: [],
      // el-carousel 容器高度
      bannerHeight: 0,
      //浏览器宽度
      screenWidth: 0,
      //导航条
      activeIndex: '1',
      //消息新闻无限滚动
      count: 10,
      loading: false,
      searchNews:'',
      //主页显示新闻的图片
      fits: [''],
      //图片地址
      url:'',
      //新闻主体对象
      news: [],
    };
  },
  //计算出展示新闻的总数
  computed: {
    noMore () {
      return this.count >= 20
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  methods: {
    findPage(id){
      this.$router.push({ name: "newsss", params: { id: id } });
    },
    toperson(){
      this.$router.push("/userinfoindex");
    },
    //跳转发表新闻页面
    editNews(){
      //需要去的页面
      window.open("");
    },
    //触发搜索新闻方法
    selectNews(){
      axios.get("").then(res=>{
        res.data;
      })
    },
    //导航条
    handleSelect(key, keyPath) {
      console.log(key,keyPath);
      this.$router.push(key);
    },
    //加载新闻
    load () {
      this.loading = true
      setTimeout(() => {
        this.count += 2
        this.loading = false
      }, 1000)
    },
    //找轮播图方法
    findImage(){
      this.$axios.post("/api/new/findImage").then(res=>{
        if(res.data.code==1){
          this.img_list=res.data.data;
        }
      })
    },
    //找新闻的方法
    findNew(){
      this.$axios.post("/api/new/findMainNews").then(res=>{
        if (res.data.code==1){
          this.news=res.data.data;
          console.log(this.news)
        }
      })
    }
  },
  mounted() {
    // 首次加载时,初始化高度
    this.screenWidth = window.innerWidth
    this.bannerHeight = 600 / 1550 * this.screenWidth
    // 窗口大小发生改变
    window.onresize = () => {
      this.screenWidth = window.innerWidth
      this.bannerHeight = 600 / 1550 * this.screenWidth
    }
    //在进前端后先执行mounted方法,去到方法中
    this.findImage();
    //找新闻的方法
    this.findNew();
  }
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
el-menu-demo {

}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
